<script lang='ts' setup>
import { addUser, UserInterface } from "@/api/userManage";
import EditorUser from "@/views/userManage/components/editorUserDialog/index.vue"
import { ElMessage } from "element-plus";
import { ref } from "vue";
const props = defineProps<{ visible: boolean }>()
const emits = defineEmits<{ (e: 'close'): void }>()
const formData = ref<UserInterface>({
    id: "",
    account: "",
    username: "",
    password: "",
    passwordAgain: "",
})

function handleSubmit(formData: UserInterface) {
    editorUserRef.value.formRef.validate((valid: any) => {
        if (valid) {
            if (formData.password !== formData.passwordAgain) return ElMessage.error('两次密码不一致')
            addUser(formData).then(() => {
                ElMessage.success('添加成功')
                handleClose()
            })
        }
    })

}
const editorUserRef = ref()
function handleClose() {
    if (editorUserRef.value.formRef) {
        editorUserRef.value.formRef.resetFields()
        editorUserRef.value.formRef.clearValidate()
    }
    emits('close')
}
</script>
<template>
    <editor-user ref="editorUserRef" :form-data="formData" :visible="props.visible"
        :form-props="{ labelWidth: '100px' }" :dialog-props="{ title: '添加用户' }" @close="handleClose"
        @submit="handleSubmit" />
</template>
<style scoped lang='scss'></style>